import type { Meta, StoryObj } from "@storybook/react"
import { Input } from "antd"
// import { Layout, SelectProps, SpaceProps } from "antd"
import { useState } from "react"
import { IntlProvider } from "react-intl"

import { localeConfig } from "@/locales"

// import { fn } from "@storybook/test"
import ComplexInput, { RangeType } from "."

const options = [
	{ label: "A", value: 1 },
	{ label: "BB", value: 2 },
	{ label: "CCCccccccccc", value: 3 }
]
function onTypeChange(v: number) {
	value = v
}
const changeRange = (range: RangeType) => {
	console.log(range)
}
let value = 1
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
	title: "ComplexInput",
	component: ComplexInput,
	render: props => {
		const [value, setValue] = useState(1)
		return (
			<div>
				{props.children ? (
					<>
						<ComplexInput value={value} onTypeChange={setValue} options={options} changeRange={changeRange}>
							<Input placeholder="我是传入的子组件1" />
							<Input placeholder="我是传入的子组件2" />
						</ComplexInput>
						<div>参见右下角show code</div>
					</>
				) : (
					<>
						<ComplexInput value={value} onTypeChange={setValue} options={options} changeRange={changeRange}></ComplexInput>
						<div>最小值 - 最大值 两个输入框是缺省的child</div>
					</>
				)}
			</div>
		)
	},
	parameters: {
		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
		Layout: "centered"
	},
	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
	tags: ["autodocs"]
	// More on argTypes: https://storybook.js.org/docs/api/argtypes
	// argTypes: {
	// 	options: SelectProps["options"],
	// 	value: SelectProps["value"],
	// 	onTypeChange: SelectProps["onChange"],
	// 	changeRange?: (range: RangeType) => void
	// } & SpaceProps,
	// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
	// args: { onClick: fn() }
} satisfies Meta<typeof ComplexInput>

export default meta
type Story = StoryObj<typeof meta>

const decorators = [
	(Story: any) => {
		const locale = "zh_CN"
		return (
			<IntlProvider locale="zh" messages={localeConfig[locale]}>
				<Story />
			</IntlProvider>
		)
	}
]

// const onTypeChange = (v: number) => {
// 	console.log(v)
// }
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const DefaultChild: Story = {
	decorators,
	args: {
		value,
		options,
		onTypeChange,
		changeRange
	}
}
export const WithChild: Story = {
	decorators,
	args: {
		value,
		options,
		onTypeChange,
		changeRange,
		children: true
	}
}
